<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const route = useRoute();
const title = ref("");
title.value = route.meta.title;

const onClickLeft = () => history.back();

</script>

<template>
  <div class="hot_c">
    <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="hot_c-title">
      <div class="conmmon-title">
        <i></i>
        <h5>热门话题</h5>
      </div>
      <div class="hot_c-title-list">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="hot_c_content">
      <div class="conmmon-title">
        <i></i>
        <h5>精选动态</h5>
      </div>
      <div class="hot_c_content_list">
        <div v-for=" key in 10">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
          <div>
            <p class="title">我是标题</p>
            <div class="name">我是名字</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hot_c {
  .hot_c-title {
    p {
      font-size: .48rem;
    }
  }
  .hot_c-title-list {
    display: flex;
    justify-content: space-around;
  }
  .hot_c-title-list div{
    width: 5.1563rem;
    height: 3.125rem;
    border-radius: .375rem;
    background-color: #fedd2b;
  }
  .conmmon-title {
    display: flex;
    margin-top: .375rem;
    margin-left: 0.4688rem;
    margin-bottom: .2rem;

    i {
      margin-top: 0.1563rem;
      display: block;
      width: 0.1563rem;
      height: 0.6375rem;
      background-color: #fedd2b;
    }

    h5 {
      margin-left: 0.25rem;
      font-size: 0.5625rem;
      line-height: 0.9375rem;
    }
  }

  .hot_c_content {

    .hot_c_content_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .hot_c_content_list>div {
      margin-top: .375rem;
      width: 5.1563rem;
      height: 7.1875rem;
      border-radius: .25rem;
      background-color: #fff;
      overflow: hidden;
    }

    .hot_c_content_list>div:nth-child(2n) {
      margin-left: .375rem;
    }

    .hot_c_content_list>div>img {
      width: 100%;
      height: 5rem;
    }

    .hot_c_content_list>div>div {
      padding: 0 .25rem;
    }

    .hot_c_content_list>div>div .title {
      margin: 0;
      margin-top: .25rem;
      font-size: .5625rem;
      font-weight: 900;
    }

    .hot_c_content_list>div>div .name {
      margin-top: .1563rem;
      font-size: .375rem;
    }
  }
}
</style>
